<template>
    <view :class="['button', type, shadow ? 'shadow' : '', disabled?'disabled':'']" :style="{fontSize, height, lineHeight:height, borderRadius:redius,width}">
      <slot></slot>
    </view>
</template>

<script>
  export default {
    name: 'ColorButton',
    props: {
      type: {
        type: String,
        default: 'common'
      },
      shadow: {
        type: Boolean,
        default: false
      },
      fontSize: {
        type: String,
        default: '18px'
      },
      height: {
        type: String,
        default: '40px'
      },
      width: {
        type: String,
        default: '100%'
      },
      border: {
        type: String,
        default: '300px'
      },
	  disabled : {
		type: Boolean,
		default: false
	  }
    },
    computed: {
      redius: function () {
        let style = this.height;
        switch (this.border){
          case 'none':
            style = '0';
            break;
          case 'min':
            style = '3px';
            break;
          default:
            break;
        }
        return style
      }
    }
  }
  
</script>

<style scoped lang="scss">
  .button {
    border-radius: 600rpx;
    color: $uni-text-color-inverse;
    text-align: center;
    margin: 0 auto;
  }
  .common {
	  color: $uni-text-color-inverse;
    background: linear-gradient(to top, $uni-color-primary, $uni-color-secondary);
  }
  .primary {
    background: $uni-color-primary;
	color: $uni-text-color-inverse;
  }
  .secondary {
    background: linear-gradient(to top, ($uni-color-primary + $uni-color-secondary) / 2, $uni-color-secondary);
  }
  .shadow {
    box-shadow:0px 2px 4px 0px rgba($uni-color-primary,0.4);
  }
  .plain {
	color: $uni-color-primary;
	border: 1px solid $uni-color-primary;
	box-sizing: border-box;
  }
  .none {
	  color: $uni-color-primary;
  }
  .disabled {
	  filter: grayscale(1);
  }
</style>
